<template>
	<view class="" :class="themeName">
	<!-- 	<view class="status_bar">
		</view> -->
		<custom-navbar :title="title" :percent="percent" is-back navigation-style="default">
			<template slot="right">
				<UserBillQuery @submit="querySubmit"></UserBillQuery>
			</template>
		</custom-navbar>
		<mescroll-uni ref="mescrollRef"  bgColor="white" :top="mescrollTop" @init="mescrollInit" :down="downOption"
			:up="upOption" @down="downCallback" @up="upCallback">
			<view class="list mt20" v-if="lists.length !== 0">
				<view v-for="(item, index) in lists" :key="index" class="item">
					<view class="bill-list bg-white">
						<view class="bill-item flex row-between">
							<view>
								<view class="black mb10">{{ item.remark_desc }}</view>
								<view class="xs muted">{{ item.create_time }}</view>
							</view>
							<view class="lg" :class="{ income: item.money <= 0 ? false : true}">
								{{ item.money > 0 ? '+' + item.money : item.money }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	/**
	 * 新增需求：
	 * 1. 从预估收益进去，标题要改为预估收益。状态要显示未结算的。
	 * Bug
	 * 1.头部导航 没有
	 */
	import {
		commissionBill
	} from "@/api/user";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	
	import UserBillQuery from "./components/UserBillQuery.vue"
	let systemInfo = uni.getSystemInfoSync();
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		components: {
			UserBillQuery
		},
		data() {
			return {
				percent: 0,
				title: '佣金明细',
				list: [{
						tabsName: "全部",
						isShow: true,
						type: "user_money",
					},
					{
						tabsName: "支出",
						isShow: false,
						type: "dec",
					},
					{
						tabsName: "收入",
						isShow: false,
						type: "inc",
					},
				],
				current: 0,
				lists: [],

				downOption: {
					auto: false, // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: "/static/images/empty/order.png",
						tip: "暂无佣金明细", // 提示
						fixed: true,
						top: "200rpx",
					},
				},
				visible: false,
				range_time: '',
				type: '',
				queryConfig: {},
				statusBarHeight: 0 ,// 状态栏高度
				mescrollTop: '48px'
			};
		},
		onLoad(options) {
			this.type = options.type;
			const { status, title } = options
			uni.setNavigationBarTitle({
				title: ''
			});
			
			this.queryConfig.status = status
			if (title) {
				this.title = title
			}
		},
		computed: {
			
		},
		created() {
			if(systemInfo.statusBarHeight) this.statusBarHeight = systemInfo.statusBarHeight;
			let height = systemInfo.platform == 'ios' ? 44 : 48;
			this.mescrollTop = this.statusBarHeight + height + 'px'
			
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
		},
		methods: {
			change(index) {
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isShow = false;
				}
				this.current = index;
				this.upCallback({
					num: 1,
					size: 10,
				});
				this.list[index].isShow = true;
			},

			upCallback(page) {
				let num = page.num;
				let size = (page.size += 5);
				
				let action = '';
				if(this.current == 1) {
					action = 'dec';
				} else if(this.current == 2) {
					action = 'inc';
				}
				const queryConfig = this.queryConfig
				
				
				commissionBill({
						type: this.type,
						page_no: num,
						page_size: size,
						...queryConfig
					})
					.then((res) => {
						if (page.num == 1) this.lists = []; //如果是第一页需手动置空列表
						this.lists = this.lists.concat(res.lists); //追加新数据
						this.mescroll.endBySize(res.lists.length, res.count);
					})
					.catch((err) => {
						this.mescroll.endBySize();
					});
			},
			clickHandler() {
				this.visible = true
			},
			
			
			querySubmit(e) {
				this.range_time = `${e.startDate} - ${e.endDate}`
				this.queryConfig = e
				this.upCallback({
					num: 1,
					size: 10,
				});
			}
		},

		onShow() {},
	};
</script>
<style lang="scss" scoped>
	uni-page-body {
		height: 100vh;
	}
	 .status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.nav-bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #ffffff;
	}
	.u-tabs {
		flex: 1;
	}
	.list {
		.item {
			.time {
				padding: 30rpx;
			}

			.bill-list {
				.bill-item {
					padding: 20rpx 30rpx;

					// border-bottom: $-solid-border;
					.income {
						color: red;
					}
				}
			}
		}
	}
</style>